<template>
  <fieldset class="tab">
    <legend>father组件</legend>
    <button
      :class="['tab-button', { active: item == aa }]"
      v-for="(item, index) in arr"
      :key="index"
      @click="transform(item)"
    >
      {{ item }}
    </button>
    <div class="tab" :is="tab"></div>
  </fieldset>
</template>
<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: yellow;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}

h2 {
  margin: 0;
}
</style>
<script>
import firest from "./firest.vue";
import second from "./second.vue";
import third from "./third.vue";

export default {
  data() {
    return {
      arr: ["firest", "second", "third"],
      aa: "firest",
    };
  },
  components: {
    firest,
    second,
    third,
  },
  methods: {
    transform(item) {
      console.log(item);
      console.log(this.aa);
      this.aa = item;
    },
  },
  computed: {
    tab() {
      return this.aa;
    },
  },
};
</script>
